.chat{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  width: 100%;
  background-color: #F1F2F3;
  z-index: 5;
  border-radius: 40rpx 40rpx 0 0;
  transition: height 0.3s linear 0s;
  .top{
    height: 50rpx;
    text-align: right;
    margin-top: 20rpx;
    .close-btn {
      width: 56rpx;
      height: 56rpx;
      margin-right: 20rpx;
    }
  }
  .message-content{
    height: 580rpx;
    overflow-y: auto;
    .msg-item{
      margin-top: 40rpx;
      .my-msg{
        margin-right: 20rpx;
        display: flex;
        justify-content: flex-end;
        .text{
          position: relative;
          max-width: 500rpx;
          min-height: 60rpx;
          overflow-wrap: break-word;
          padding: 20rpx;
          box-sizing: border-box;
          background-color: #9eea6a;
          border-radius: 6rpx;
          text-align: left;
          margin-right: 30rpx;
        }
        .text::before{
          content: '';
          position: absolute;
          width: 20rpx;
          height: 20rpx;
          background-color: #9eea6a;
          top: 20rpx;
          right: -10rpx;
          transform:rotate(45deg);
        }
      }
      .other-msg{
        margin-left: 20rpx;
        display: flex;
        justify-content: flex-start;
        .text{
          position: relative;
          max-width: 500rpx;
          min-height: 60rpx;
          overflow-wrap: break-word;
          padding: 20rpx;
          box-sizing: border-box;
          background-color: #fff;
          border: 2rpx solid #ededed;
          border-radius: 6rpx;
          text-align: left;
          margin-left: 30rpx;
        }
        .text::before{
          content: '';
          position: absolute;
          width: 10px;
          height: 10px;
          background-color: #fff;
          top: 10px;
          left: -5px;
          transform:rotate(45deg);
          border-left: 1px solid #ededed;
          border-bottom: 1px solid #ededed;
        }
      }
    }
  }
  .send-message{
    height: 100rpx;
    padding: 20rpx 40rpx 0 40rpx;
    background: #F6F6F6;
    border: 1px solid #DDDDDD;
    .msg-input{
      height: 60rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      padding: 0 23rpx;
      margin-bottom: 20rpx;
    }
  }
  &.show{
    height: 760rpx;
  }
}